import React from 'react'
import { List, Image, Dialog } from 'antd-mobile'
import { PayCircleOutline, CollectMoneyOutline, LocationOutline, AppstoreOutline, MessageOutline, UploadOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

const Index = () => {
  const list = [
    { title: '我的余额', icon: <PayCircleOutline /> },
    { title: '我的积分', icon: <CollectMoneyOutline /> },
    { title: '收货地址', icon: <LocationOutline /> },
    { title: '订单中心', icon: <AppstoreOutline /> },
    { title: '我的客服', icon: <MessageOutline /> },
    { title: '退出', icon: <UploadOutline /> },
  ]

  const navigate = useNavigate()
  return (
    <List header=''>
      <List.Item
        key="394a52f0-52ea-4988-9bb2-c0da45cdf702"
        prefix={
          <Image
            src={require('../../assets/logo192.png')}
            style={{ borderRadius: 20 }}
            fit='cover'
            width={40}
            height={40}
          />
        }
        arrow
        description="fire~~!"
        onClick={() => { navigate('/profile') }}
      >
        我是钢铁侠
      </List.Item>
      {
        list.map((item, index) => {
          return (
            <List.Item key={index} prefix={item.icon} onClick={() => {
              Dialog.show({
                title: '提示',
                content: '啊哦，我家主人没还时间开发，去别的地方玩吧~！',
                closeOnAction: true,
                closeOnMaskClick: true,
                actions: [
                  [{
                    key: 'cancel',
                    text: '好吧',
                  },
                  {
                    key: 'confirm',
                    text: 'ok，回头再来',
                  },]
                ],
              })
            }}>
              {item.title}
            </List.Item>
          )
        })
      }
    </List>

  )
}

export default Index